<template>
  <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="55px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="username" :rules="[{ validator: validateUseName, trigger: 'blur' }]">
      <el-input v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off" clearable size="large"></el-input>
    </el-form-item>
    <el-form-item ref="pwdInput" label="密码" prop="pwd" :rules="[{ validator: validatePass, trigger: 'blur' }]">
      <el-input v-model="ruleForm.pwd" placeholder="请输入密码" type="password" autocomplete="off" clearable size="large"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">登陆</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import { ref, reactive} from 'vue'
  import {useRouter} from 'vue-router'
  import { ElMessage,ElLoading } from 'element-plus'
  import axios from "axios";
  export default {
    name:'Main',
    setup(){
      const ruleFormRef = ref(null)
      const pwdInput=ref(null)
      const ruleForm = reactive({
        username: '',
        pwd: ''
      })
      const router=useRouter()
      const rules = reactive({
        username: [{ validator: validateUseName, trigger: 'blur' }],
        pwd: [{ validator: validatePass, trigger: 'blur' }],
      })

      //重置表单方法
      const resetForm = (formEl) => {
        if (!formEl) return
        formEl.resetFields()
      }
      //验证用户名输入框方法
      const validateUseName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      //验证密码输入框方法
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码！'))
        } else {
          callback()
        }
      }
      //加载中弹窗相关
      let loadingInstance ; //定义loading变量
      function startLoading() {
        //加载中效果
        loadingInstance  = ElLoading.service({
          lock: true,
          text: "加载中...",
          // background: "rgba(0, 0, 0, 0.7)"
          background:"#7C9ADC7F"
        });
      }
      function endLoading() {
        //关闭加载中效果
        loadingInstance .close();
      }
      //确认登陆方法
      const submitForm = (formEl) => {
        if (!formEl) return
        formEl.validate((valid) => {
          if (valid) {
            //请求数据库验证用户名密码，返回成功跳转到主页
            axios.get('http://localhost:8085/getAccount',{
              params:{
                accountUsername:ruleForm.username,   //住户id
                accountPassword:ruleForm.pwd,
              }
            }).then(
                (resp)=>{
                  if(resp.data=="nothing"){
                    ElMessage({type:'error',message:'用户名不存在!'})
                    formEl.resetFields()
                  }else if(resp.data=="pwdErro"){
                    ElMessage({type:'error',message:'密码错误,请重新输入!'})
                    pwdInput.value.resetField()
                  }else{
                    window.sessionStorage.setItem('user',JSON.stringify({
                      username:ruleForm.username,
                      type:resp.data.split("---")[0],
                      verify:resp.data.split("---")[1]
                    }))
                    startLoading()
                    setTimeout(()=>{
                      endLoading()
                      if(resp.data.split("---")[2]=="管理员"){
                        router.push({name:'adminHome'})
                      }else{
                        router.push({name:'userProperty'})
                      }
                    },500)
                  }
                },
                ()=>{
                  ElMessage({type:'error',message:'网络请求失败！'})
                }
            )
          } else {
            ElMessage({message:'登陆失败！'})
            return false
          }
        })
      }


      return{
        ruleFormRef,
        ruleForm,
        rules,
        validateUseName,
        validatePass,
        submitForm,
        resetForm,
        pwdInput,
      }

    }
  }
</script>
<style scoped>
  .demo-ruleForm{
    width: 350px;
    height: 170px;
    padding: 50px 20px 30px 20px;
    border-radius: 20px;
    margin-top: 10px;
    background-color: rgba(254,219,207,0.5)
  }
</style>


